<template>
    <div class="page">
        <div class="header">
            <div class="left">
                <img src="@/assets/merchant/title.png" alt="" />
                <text>{{ route.query.type == 'DQPOS' ? '电签' : '大POS' }}唤醒数据</text>
            </div>
            <div class="right" @click="showCalendar = true">
                {{ currentTime }}
                <img class="selTime" src="@/assets/merchant/toNext3.png" alt="" />
            </div>
        </div>
        <div class="card">
            <div class="num">{{ detailInfo.direct }}台</div>
            <div>自营机具唤醒数</div>
            <div class="cardBottm">
                <div class="bottomItem">
                    <div class="num">{{ detailInfo.below }}台</div>
                    <div>下级团队机具唤醒数</div>
                </div>
                <div class="bottomItem">
                    <div class="num">{{ detailInfo.team }}台</div>
                    <div>团队机具唤醒数</div>
                </div>
            </div>
        </div>
        <div class="dataList">
            <div class="tableHead">
                <div class="listItem">日期</div>
                <div class="listItem">自营机具数</div>
                <div class="listItem">下级团队机具数</div>
            </div>
            <div class="listBox">
                <div class="tableHead" v-for="(item, index) in detailList" :key="index">
                    <div class="listItem">{{ item.activateDate }}</div>
                    <div class="listItem">{{ item.directActivateCount }}</div>
                    <div class="listItem">{{ item.belowActivateCount }}</div>
                </div>
                <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                   
                </van-list> -->
            </div>
        </div>
        <!-- 选择日期 -->
        <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            :allow-same-day="true"
            v-model:show="showCalendar"
            :default-date="defaultDay"
            type="range"
            @confirm="onConfirm"
        />
    </div>
</template>
<script setup>
import { posActivateDetailStatistic } from '@/api/pos'
import { parseTime, getDayPro } from '@/utils/utils'
const currentPage = ref(1)
const detailInfo = ref({})
let detailList = reactive([])
const loading = ref(false)
const finished = ref(false)
const route = useRoute()
const currentTime = ref('')
const defaultDay = ref([]) //默认日期
// 日历设置选择范围
const minDate = ref(new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate()))
const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()))
let props = defineProps({
    active: {
        type: String,
        default: 'DQPOS'
    }
})
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    return year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0')
}

const getposActivateDetailStatistic = () => {
    posActivateDetailStatistic({
        type: route.query.type,
        startTime: currentTime.value.split('至')[0],
        endTime: currentTime.value.split('至')[1]
    }).then(res => {
        detailInfo.value = res.object.statistic
        detailList.push(...res.object.dayStatistic)
        if (res.object < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value += 1
            finished.value = false
            loading.value = false
        }
    })
}
getDayPro('本月').then(res => {
    currentTime.value = res
    defaultDay.value = [new Date(res.split('至')[0]), new Date(res.split('至')[1])]
    getposActivateDetailStatistic()
})
const onLoad = () => {
    getposActivateDetailStatistic()
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
}
const showCalendar = ref(false)
const onConfirm = values => {
    currentPage.value = 1
    detailList = []
    const [start, end] = values
    console.log(values, 'values')
    currentTime.value = `${formatTime(start)}至${formatTime(end)}`
    getposActivateDetailStatistic()
    showCalendar.value = false
}
</script>
<style scoped lang="scss">
.page {
    padding: 13px 10px;
    // margin-top: 100px;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
            width: 22px;
            margin-right: 5px;
            height: 15px;
        }
        text {
            font-size: 16px;
            font-family: SimHei;
            font-weight: 400;
            color: #4d4d4d;
        }
        .selTime {
            width: 10px;
            height: 10px;
        }
    }
    .card {
        padding: 15px 25px;
        background: linear-gradient(163deg, #66d6ff 0%, #a9d0fe 100%);
        opacity: 1;
        border-radius: 6px;
        margin-top: 12px;
        font-size: 16px;
        font-family: DingTalk JinBuTi;
        font-weight: 400;
        color: #ffffff;
        .num {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .cardBottm {
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
        }
    }
    .dataList {
        margin-top: 11px;
        .listBox {
            height: 75vh;
            overflow: scroll;
        }
    }
    .tableHead {
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 40px;
        .listItem {
            width: 33%;
            border-bottom: 1px solid #e7e7e7;
        }
    }
}
</style>
